<template>
  <div class="imageLoader-container">
    <img v-if="!everyLoaded" :src="placeholder" alt="" class="placeholder">
    <img :src="src" alt="" class="origin" @load="handleLoaded" :style="{
        opacity:originOpacity,
        transition:duration+'ms'
        }">
  </div>
</template>

<script>
export default {
  name: "ImageLoader",
  props: {
    src: {
      type: String,
      require: true,
    },
    placeholder: {
      type: String,
      require: true,
    },
    duration: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
       originLoaded:false,
       everyLoaded:false,
    };
  },
  computed:{
      originOpacity(){
          return this.originLoaded?1:0
      }
  },
  methods:{
      handleLoaded(){
          this.originLoaded = true;
          setTimeout(()=>{
              this.everyLoaded =true;
              this.$emit('load');
          },this.duration)
      }
  }
};
</script>

<style lang="less" scoped>
@import "~@/styles/mixin.less";
.imageLoader-container {
  position: relative;
  width: 100%;
  height: 100%;
  img {
    .self-fill();
    &.placeholder{
        filter:blur(10px);
    }
  }
}
</style>